<script setup>
import { ref, onMounted, nextTick } from 'vue'
import useTableView from '@/hooks/use-table-view'
import DialogParams from '@/views/system/params/components/DialogParams.vue'
import useDelPop from '@/hooks/use-del-popover'
import DialogDictParams from '@/views/system/params/components/DialogDictParams.vue'
import {
  delParamsDictMockApi,
  delParamsMockApi,
  pageParamsDictMockApi,
  pageParamsMockApi
} from '@/api/mock-js/system/params-api'

defineOptions({
  name: 'Params'
})

const queryInfo = ref({
  params: {
    paramType: 2
  }
})
const {tableData, loading, total, del, dialogRef, showDialog, visibleDialog} = useTableView(queryInfo)
// 删除 hooks
const {delData, visibleDelPop, tempRef, showDelPop} = useDelPop()

const paramsTypeList = [
  {
    paramType: 1,
    paramValueName: '参数'
  }, {
    paramType: 2,
    paramValueName: '字典'
  }
]
// 根据字典类型请求接口 1-参数；2-字典
const handleParamType = async () => {
  await nextTick()
  await renderTable(1)
}
const renderTable = async (pageNum = undefined) => {
  if (pageNum) queryInfo.value.pageNum = pageNum
  try {
    loading.value = true
    let res
    switch (queryInfo.value.params.paramType) {
      case 1:
        res = await pageParamsMockApi(queryInfo.value)
        break
      case 2:
        res = await pageParamsDictMockApi(queryInfo.value)
        break
    }
    const {
      list,
      total: dataTotal
    } = res.data
    total.value = dataTotal
    tableData.value = list
  } catch (e) {
    throw new Error(e)
  } finally {
    loading.value = false
  }
}

// 编辑字典的paramValueName时
const visibleSubDialog = ref(false)
const subDialogRef = ref()
const showSubDialog = async (row) => {
  visibleSubDialog.value = true
  await nextTick()
  // 修改子组件暴露的值
  subDialogRef.value.parentInfo = row
}
// 删除
const handleDel = async () => {
  // 1-参数；2-字典
  if (queryInfo.value.params.paramType === 1) {
    await del?.(delData.value.id, delParamsMockApi, '', renderTable)
  } else {
    await del?.(delData.value.id, delParamsDictMockApi, '', renderTable)
  }
}
onMounted(async () => {
  await renderTable(1)
})
</script>
<template>
  <TableView class="role" v-loading="loading"
             v-model="queryInfo.pageNum"
             v-model:pageSize="queryInfo.pageSize"
             :total="total"
             @reload-table="renderTable()">
    <template #header>
      <ViewSearchForm v-model="queryInfo"
                      :tool-list="['keyword']"
                      @on-search="renderTable(1)">
        <ElFormItem label-width="14px" label=" ">
          <ElRadioGroup v-model="queryInfo.params.paramType" @change="handleParamType">
            <ElRadioButton v-for="{paramType,paramValueName} in paramsTypeList" :key="paramType" :label="paramType">
              {{ paramValueName }}
            </ElRadioButton>
          </ElRadioGroup>
        </ElFormItem>
      </ViewSearchForm>
    </template>
    <template #headerRight>
      <ElButton v-permission="['sys:params:edit']" type="primary" @click="showDialog()">添加字典</ElButton>
    </template>
    <ElTable ref="tableRef" :data="tableData" style="width: 100%;" border stripe>
      <ElTableColumn type="index" label="ID" width="80" align="center"/>
      <ElTableColumn label="字典类型" width="100" align="center" #default="{row}">
        <template v-for="{paramType,paramValueName} in paramsTypeList" :key="paramType">
          <ElTag :type="row.paramType===2?'success':''"
                 v-if="row.paramType===paramType">{{ paramValueName }}
          </ElTag>
        </template>
      </ElTableColumn>
      <ElTableColumn label="字典键" width="180" #default="{row}">
        <ElButton v-if="row.paramType===2" type="primary" link @click="showSubDialog(row)">{{ row.paramKey }}</ElButton>
        <span v-else>{{ row.paramKey }}</span>
      </ElTableColumn>
      <ElTableColumn prop="paramName" label="字典键名" width="160"/>
      <template v-if="queryInfo.params.paramType===1">
        <ElTableColumn prop="paramValue" label="字典值" width="200"/>
        <ElTableColumn prop="paramValueName" label="字典值名" min-width="200"/>
      </template>
      <ElTableColumn prop="remarks" label="备注" min-width="200"/>
      <ElTableColumn label="操作" width="200" fixed="right" #default="{row}">
        <ElButton v-permission="['sys:params:del']" size="small"
                  @click="e=>showDelPop(e,row,`参数/字典-${row.paramName}`)">
          删除
        </ElButton>
        <ElButton size="small" type="primary" v-permission="['sys:params:edit']"
                  @click="showDialog(row,`-${row.paramName}`)">编辑
        </ElButton>
      </ElTableColumn>
    </ElTable>
    <!--  删除popover start -->
    <DeletePopover v-if="visibleDelPop"
                   :temp-ref="tempRef"
                   v-model:del-info="delData"
                   v-model="visibleDelPop"
                   @on-submit="handleDel"/>
    <!--  删除popover end -->
    <!-- 添加、编辑 dialog -->
    <DialogParams ref="dialogRef" v-if="visibleDialog" v-model="visibleDialog"
                  @on-close="renderTable()"/>
    <!--  编辑系统字典列表  -->
    <DialogDictParams ref="subDialogRef" v-if="visibleSubDialog" v-model="visibleSubDialog"/>
  </TableView>
</template>

